import React,{Fragment} from 'react';
import {NavLink} from 'react-router-dom';
import './index.scss';
import {List,Modal} from 'antd-mobile';
import {connect} from 'react-redux';
import actions from '../../store/modules/book/actions';

const Item = List.Item;
// const Brief = Item.Brief;

class Classify extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
    };
  }
  showModal = key => (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }

  render() {
    return (
      <div className="page_classify">
        <div className="c-hd">
          <ul className="m-pagenav">
            <NavLink to="/"><li className="itm iconfont icon-icon"></li></NavLink>
            <li className="itmm">
              <b />
            </li>
            <li className='itms'>分类</li>
          </ul>
          <div className="act">
            <div className="m-login iconfont icon-sanheng" onClick={this.showModal('modal')} />

            <NavLink to="/search">
              <div className="m-search iconfont icon-sousuo" />
            </NavLink>
          </div>
        </div>

        <div className="c-bd">
          <List>
            {
              this.props.categoryList.map(item => (
                <NavLink to={`/classify/${item.categoryId}`} key={item.categoryId}>
                  <Item 
                    arrow="horizontal"
                    multipleLine
                    wrap
                  >
                    <div className="img">
                      <img src={item.bg} alt=""/>
                      <span>{item.total}</span>
                    </div>
                    <div className="info">
                      <h3>{item.categoryName}</h3>
                      <p>
                        {item.subCategory.map(sub => (
                          <Fragment key={sub.subCategoryId}><span>{sub.subCategoryName}</span><em>/</em></Fragment>
                        ))}
                      </p>
                    </div>
                  </Item>
                </NavLink>
              ))
            }
          </List>
        </div>

        <div className="g-ft">
          <div className="m-cprt">
            <p>
              <a href="#/" target="_blank">多看客户端</a>
              <span>|</span>
              <a href="#/" target="_blank">电脑版</a>
            </p>
            <p>Copyright&copy;duokan.com</p>
          </div>
        </div>

        <Modal
          popup
          visible={this.state.modal}
          onClose={this.onClose('modal')}
          animationType="fade"
        >
          <div className="m-nav">
            <ul className="m-nav-top">
              <li>
                <NavLink
                  to="/special"
                  className="box"
                  style={{ backgroundColor: "#ef4848" }}
                >
                  <i className="iconfont icon-sale" />
                </NavLink>
                <span>特价</span>
              </li>
              <li>
                <NavLink
                  to="/free"
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-Free-Tag" />
                </NavLink>
                <span>免费</span>
              </li>
              <li>
                <NavLink
                  to="/best"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-tubiaolunkuo-" />
                </NavLink>
                <span>畅销</span>
              </li>
              <li>
                <NavLink
                  to="/shelf"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-icon_shujianor" />
                </NavLink>
                <span>书架</span>
              </li>
            </ul>
            <ul className="m-nav-bottom">
              <li>
                <NavLink
                  to="/classify"
                  className="box"
                  style={{ backgroundColor: "#02d26e" }}
                >
                  <i className="iconfont icon-fenlei" />
                </NavLink>
                <span>分类</span>
              </li>
              <li>
                <NavLink
                  to="/redeem"
                  className="box"
                  style={{ backgroundColor: "#4f8fd6" }}
                >
                  <i className="iconfont icon-shuquan" />
                </NavLink>
                <span>兑换码</span>
              </li>
              <li>
                <NavLink
                  to="/coupon"
                  className="box"
                  style={{ backgroundColor: "#7cc416" }}
                >
                  <i className="iconfont icon-changxiaoremai" />
                </NavLink>
                <span>购书券</span>
              </li>
              <li>
                <a
                  href='http://www.duokan.com/product'
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-bangzhushouji" />
                </a>
                <span>客户端</span>
              </li>
            </ul>
          </div>
        </Modal>

      </div>
    );
  }
  componentDidMount() {
    this.props.getCategoryList();
  }
};

export default connect(
  state => {
    return {
      categoryList:state.book.categoryList
    }
  },
  dispatch => {
    return {
      getCategoryList: () => {
        dispatch(actions.getCategoryAct())
      }
    }
  }
)(Classify);
